<template>
  <systemDialog 
  :title="dailog.title"
  :width="dailog.width"
  :height="dailog.height"
  :visible="dailog.visible"
  @onClose="onClose"
  @onConfirm="confirm"
  >
    <template v-slot:content>
      <el-tree 
        style="font-size: 14px"
        ref="parentTree"
        :data="treeData.data"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <!-- 自定义树节点的内容，参数为 { node, data } -->
        <template #default="{ node, data }">
          <div class="custom-tree-container">
              <!-- 长度为0说明没有下级 -->
              <span v-if="data.children.length == 0">
                <DocumentRemove style="width: 1.3em; height: 1.3em; margin-right: 5px;color: #8c8c8c;"></DocumentRemove>
              </span>
              <span v-else @click.stop="openBtn(data)">
                <component style="width: 1.1em; height: 1.1em; margin-right: 5px;color: #8c8c8c;" :is="data.open ? 'Plus' : 'Minus'" />
              </span>
              <span>{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </template>
  </systemDialog>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog';
import userMenuParent from '@/composables/menu/menuParent'


// 弹框属性
const { dailog, onShow, onClose } = userDialog()

// 子组件传值给父组件addMenu
const emit = defineEmits(['select'])

// 弹框确定事件
const confirm = () => {
  emit('select', selectNode)
  onClose()
}

// 供父组件调用，显示弹窗
const show111 = async () => {
    console.log(33)
  // 获取树的数据
  await getTreeData()
  // 设置弹框的属性
  dailog.title = '选择上级菜单'
  dailog.height = 400
  dailog.width = 450
  // 显示弹窗
  onShow()
}

// 在组件中，属性和方法,只能对当前template
// 外部需要使用的时候,需要使用 defineExpose 暴露出去
// parent.vue -> userSelectParent.ts -> addAndEdit.vue
defineExpose({
  show111
})

// 树相关数据
const { treeData,defaultProps,handleNodeClick, getTreeData, openBtn, parentTree, selectNode } = userMenuParent()

</script>
<style lang='scss'>
:deep(.el-icon svg) {
  color: #000;
  // display: none;
}

.el-tree {
  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集像右偏移 给数线留出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  //这是竖线
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  //这自定义的线 的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  //横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  //去掉elementui自带的展开按钮  一个向下的按钮,打开时向右
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  //每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}
//去掉最上级的before  after 即是去电最上层的连接线
.el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>